// Sidebar.tsx
import React from 'react';
import './Sidebar.css';

interface SidebarProps {
  selected: string;
  onSelect: (key: string) => void;
  collapsed: boolean;
  onToggle: () => void;
}

const Sidebar: React.FC<SidebarProps> = ({ selected, onSelect, collapsed, onToggle }) => {
  return (
    <div className={`sidebar${collapsed ? ' collapsed' : ''}`}>
      {!collapsed && (
        <ul>
          <li className={selected === '心得' ? 'active' : ''} onClick={() => onSelect('心得')}>
            <span className="icon" role="img" aria-label="心得">✏️</span> 学习心得
          </li>
          <li className={selected === '题库' ? 'active' : ''} onClick={() => onSelect('题库')}>
            <span className="icon" role="img" aria-label="题库">📋</span> 题库管理
          </li>
        </ul>
      )}
      <div style={{ position: 'absolute', bottom: 0, left: 0, width: '100%', textAlign: 'center', padding: '8px 0' }}>
        <button className="collapse-btn" onClick={onToggle}>{collapsed ? '>' : '<'}</button>
      </div>
    </div>
  );
};

export default Sidebar;